(function(config,server,helper,com){
	var r = React;
	var obj = {
		base:{
			button:r.createFactory(r.createClass({
				render:function(){
					var self = this;
					var props = self.props;
					var type = props.type || 'button';
					var ret;
					var cls = ['am-btn'];
					var retOp = {};
					var theme = props.theme || 'default';
					if(theme === 'info') theme = 'secondary';
					cls.push('am-btn-' + theme);
					if(props.id) {retOp.id = props.id;}
					else{ retOp.id = helper.uuid16();}
					if(props.lg) cls.push('am-btn-lg');
					if(props.sm) cls.push('am-btn-sm');
					if(props.xs) cls.push('am-btn-xs');
					if(props.block) cls.push('am-btn-block');
					if(props.disabled ) retOp.disabled = 'disabled';
					if(props.onClick) retOp.onClick = props.onClick;
					if(props.className) cls.push(props.className);
					
					for(var key in props){
						if(key.indexOf('data-') === 0){
							retOp[key] = props[key];
						}
					}
					
					retOp.className = cls.join(' ');
					if(type === 'a'){
						retOp.href = props.href || 'javascript:void(0);';
						retOp.target = props.target || '_self';
						ret = r.DOM.a(retOp,props.children);
					}else{
						ret = r.DOM.button(retOp,props.children);
					}
					return ret;
				}
			}))
			,navbar:r.createFactory(r.createClass({
				render:function(){
					var self = this;
					var props = self.props;
					var ret;
					var cls = ['am-topbar'];
					var retOp = {};
					if(props.id) {retOp.id = props.id;}
					else{ retOp.id = helper.uuid16();}
					if(props.fixedTop) cls.push('am-topbar-fixed-top');
					if(props.fixedBottom) cls.push('am-topbar-fixed-bottom');
					if(props.className) cls.push(props.className);
					
					var titlehref = props.href || 'javascript:void(0)';
					
					retOp.className = cls.join(' ');
					ret = r.DOM.header(retOp
						,r.DOM.h1({className:'am-topbar-brand'}
							,r.DOM.a({href:titlehref},props.title))
						,props.children
					);
					return ret;
				}
			}))
			,text:r.createFactory(r.createClass({
				render:function(){
					var self = this;
					var props = self.props;
					var ret;
					var cls = [];
					var retOp = {};
					var theme = props.theme;
					if(theme === 'info') theme = 'secondary';
					if(theme) cls.push('am-text-' + theme);
					if(props.id) {retOp.id = props.id;}
					else{ retOp.id = helper.uuid16();}
					if(props.className) cls.push(props.className);
					
					retOp.className = cls.join(' ');
					ret = r.DOM.p(retOp,props.children);
					return ret;
				}
			}))
			,list:r.createFactory(r.createClass({
				render:function(){
					var self = this;
					var props = self.props;
					var ret;
					var cls = ['am-list','am-list-border'];
					var retOp = {};
					if(props.id) {retOp.id = props.id;}
					else{ retOp.id = helper.uuid16();}
					if(props.striped) cls.push('am-list-striped');
					if(props.className) cls.push(props.className);
					
					retOp.className = cls.join(' ');
					var children = null;
					if(props.children){
						children = props.children.map(function(one){
							var childkey = helper.uuid16();
							var cls2 = [];
							var sty2 = {};
							if(one.style){
								sty2 = one.style;
							}
							if(one.active){
								sty2.color = '#fff';
								sty2.backgroundColor = '#428bca';
								sty2.borderColor = '#428bca';
							}
							return r.DOM.li({key:childkey}
								,r.DOM.a({
									href:one.href || 'javascript:void(0)'
									,style:sty2
									,className:cls2.join(' ')
									,onClick:props.onItemClick
								},one.content));
						});
					}
					ret = r.DOM.ul(retOp,children);
					return ret;
				}
			}))
			,container:r.createFactory(r.createClass({
				render:function(){
					var self = this;
					var props = self.props;
					var ret;
					var cls = ['am-container'];
					var retOp = {};
					if(props.id) {retOp.id = props.id;}
					else{ retOp.id = helper.uuid16();}
					if(props.className) cls.push(props.className);
					
					retOp.className = cls.join(' ');
					ret = r.DOM.div(retOp,props.children);
					return ret;
				}
			}))
			,bg:r.createFactory(r.createClass({
				render:function(){
					var self = this;
					var props = self.props;
					var ret;
					var cls = [];
					var retOp = {};
					var theme = props.theme || 'primary';
					if(theme === 'primary'){
						retOp.style = {
							color: '#fff'
							,backgroundColor: '#0e90d2'
						};
					}else if(theme === 'success'){
						retOp.style = {
							backgroundColor: '#dff0d8'
						};
					}else if(theme === 'info'){
						retOp.style = {
							backgroundColor: '#d9edf7'
						}
					}else if(theme === 'warning'){
						retOp.style = {
							backgroundColor: '#fcf8e3'
						};
					}else if(theme === 'danger'){
						retOp.style = {
							backgroundColor: '#f2dede'
						};
					}
					if(props.id) {retOp.id = props.id;}
					else{ retOp.id = helper.uuid16();}
					if(props.className) cls.push(props.className);
					retOp.style.padding = '10px';
					retOp.className = cls.join(' ');
					ret = r.DOM.p(retOp,props.children);
					return ret;
				}
			}))
			,img:r.createFactory(r.createClass({
				render:function(){
					var self = this;
					var props = self.props;
					var cls = [];
					var retOp = {};
					if(props.rounded) cls.push('am-radius');
					if(props.circle) cls.push('am-circle');
					if(props.thumbnail) cls.push('am-img-thumbnail');
					if(props.src) retOp.src = props.src;
					if(props.id) {retOp.id = props.id;}
					else{ retOp.id = helper.uuid16();}
					if(props.className) cls.push(props.className);
					retOp.className = cls.join(' ');
					var ret = r.DOM.img(retOp);
					return ret;
				}
			}))
			,input:r.createFactory(r.createClass({
				componentDidMount:function(){
					var self = this;
					var props = self.props;
					var state = self.state;
					if(props.type === 'ace'){
						var name = props.name;
						if(name){
							var aceid = name + '_ace';
							var ace1 = ace.edit(aceid);
							
							var StatusBar = ace.require("ace/ext/statusbar").StatusBar;
							var statusBar = new StatusBar(ace1, document.getElementById(aceid + "_status"));
							
							if(props.aceTheme){
								ace1.setTheme("ace/theme/" + props.aceTheme);
							}
							
							if(props.aceType){
								var mode = ace.require("ace/mode/" + props.aceType).Mode;
								ace1.session.setMode(new mode());
							}
							
							ace1.$blockScrolling = Infinity;
							if(props.value){
								ace1.setValue(props.value);
							}
							ace1.getSession().on('change', function(e) {
								$('#' + name).val(ace1.getValue());
							});
						}
					}
				},
				render:function(){
					var self = this;
					var props = self.props;
					var type = props.type || 'text';
					var ret;
					var retOp = {
						className:'am-form-field'
					};
					if(props.name) retOp.name = props.name;
					if(props.id) {retOp.id = props.id;}
					else{ retOp.id = helper.uuid16();}
					if(props.value) retOp.defaultValue = props.value;
					if(props.placeholder) retOp.placeholder = props.placeholder;
					if(props.disabled) retOp.disabled = 'disabled';
					if(props.readonly) retOp.readonly = 'readonly';
					if(props.onClick) retOp.onClick = props.onClick;
					if(props.onChange) retOp.onChange = props.onChange;
					if(props.onFocus) retOp.onFocus = props.onFocus;
					if(props.onBlur) retOp.onBlur = props.onBlur;
					
					if(type === 'textarea'){
						retOp.rows = props.rows || 3;
						ret = r.DOM.textarea(retOp);
					}else if(type === 'ace'){
						retOp.type = 'hidden';
						retOp.id = retOp.name;
            ret = r.DOM.div({}
              ,r.DOM.div({style:{width:'100%',height:props.height||'100px'},id:retOp.name+'_ace'})
							,r.DOM.div({id:retOp.name+'_ace_status'})
              ,r.DOM.input(retOp)
            );
          }else if(type === 'select'){
						if(props.multiple) retOp.multiple  = 'multiple';
						ret = r.DOM.select(retOp,props.children);
					}else if(type === 'submit' || type === 'button' || type === 'reset'){
						var cls = ['am-btn'];
						retOp.type  = type;
						if(!props.theme) props.theme = 'defaut';
						if(props.theme === 'info') props.theme = 'secondary';
						if(props.theme) cls.push('am-btn-' + props.theme);
						if(props.lg) cls.push('am-btn-lg');
						if(props.sm) cls.push('am-btn-sm');
						if(props.xs) cls.push('am-btn-xs');
						if(props.block) cls.push('am-btn-block');
						if(props.disabled ) retOp.disabled = 'disabled';
						if(props.onClick) retOp.onClick = props.onClick;
						retOp.className = cls.join(' ');
						ret = r.DOM.input(retOp);
					}else{
						retOp.type  = type;
						ret = r.DOM.input(retOp);
					}
					return ret;
				}
			}))
			,table:r.createFactory(r.createClass({
				render:function(){
					var self = this;
					var props = self.props;
					var retOp = {};
					var cls = ['am-table','am-table-striped','am-table-hover'];
					if(props.id) {retOp.id = props.id;}
					else{ retOp.id = helper.uuid16();}
					
					if(props.bordered) cls.push('am-table-bordered');
					if(props.condensed) cls.push('am-table-compact');
					if(props.responsive) cls.push('am-text-nowrap');
					if(props.className) cls.push(props.className);
					
					retOp.className = cls.join(' ');
					var ret = r.DOM.table(retOp,props.children);
					if(props.responsive) {
						ret = r.DOM.div({className:'am-scrollable-horizontal'},ret);
					}
					return ret;
				}
			}))
			,grid:r.createFactory(r.createClass({
				render:function(){
					var self = this;
					var props = self.props;
					var itemsI = 0;
					var items = props.children || [];
					var defXs = items.length?12/items.length:12;
					var retOp = {className:'am-g'};
					var ret;
					if(props.id) {retOp.id = props.id;}
					else{ retOp.id = helper.uuid16();}
					if(props.className) retOp.className += ' ' + props.className;
					
					var cols;
					if(items.map){
						cols = items.map(function(one){
							var colskey = helper.uuid16();
							var colclass = ['am-u-sm-' + (one.xs || defXs)];
							if(one.offset) colclass.push('am-u-sm-offset-' + one.offset);
							if(one.className) colclass.push(one.className);
							return r.DOM.div({key:colskey,className:colclass.join(' ')},one.content);
						});
					}else if(items.content){
						var one = items;
						var colskey = helper.uuid16();
						var colclass = ['am-u-sm-' + (one.xs || defXs)];
						if(one.offset) colclass .push('am-u-sm-offset-' + one.offset);
						if(one.className) colclass.push(one.className);
						cols = r.DOM.div({key:colskey,className:colclass.join(' ')},one.content);
					}
					
					ret = r.DOM.div(retOp,cols);
					return ret;
				}
			}))
		}
		,controller:{
			gridlist:r.createFactory(r.createClass({
				getInitialState:function(){
					return {
						items:[]
						,pageNo:1
						,isLast:true
						,pageCount:1
						,sortKey:null
						,sortType:null
					};
				},
				getChecks:function(){
					var self = this;
					var props = self.props;
					var selectedIndex = self.selectedIndex || {};
					var canSelect = props.canSelect;
					var state = self.state;
					var tableitems = state.items;
					var tableid = props.id;
					var checks = [];
					for(var key in selectedIndex){
						checks.push(selectedIndex[key]);
					}
					return checks;
				},
				componentDidMount:function(){
					var self = this;
					var props = self.props;
					self.loadData();
				},
				beforePage:function(){
					var self = this;
					var props = self.props;
					var state = self.state;
					var pageSize = props.pageSize;
					var pageNo = state.pageNo;
					self.loadData(pageNo - 1);
				},
				nextPage:function(){
					var self = this;
					var props = self.props;
					var state = self.state;
					var pageNo = state.pageNo;
					self.loadData(pageNo + 1);
				},
				loadData:function(pageno){
					var self = this;
					var props = self.props;
					var state = self.state;
					var pageSize = props.pageSize;
					var pageNo = pageno || state.pageNo;
					var allcount;
					var params = props.defaultParams || {};
					if(props.countServiceName){
						server.invokeService(props.countServiceName,params).then(function(result){
							allcount  = result[0].allcount;
							if(pageSize > 0){
								params.__limit_no__ = pageSize * (pageNo-1);
								params.__limit_size__ = pageSize + 1;
							}
							loadresult();
						});
					}else{
						if(pageSize > 0){
							params.__limit_no__ = pageSize * (pageNo-1);
							params.__limit_size__ = pageSize + 1;
						}
						loadresult();
					}
					
					function loadresult(){
						if(props.serviceName){
							return server.invokeService(props.serviceName,params).then(function(result){
								if(typeof props.formatResult === 'function'){
									result = props.formatResult(result);
								}
								var s = {pageNo:pageNo};
								if(result.length > pageSize){
									s.isLast = false;
									result.pop();
								}else{
									s.isLast = true;
								}
								if(allcount) {
									s.pageCount = parseInt(allcount/pageSize);
									if(allcount % pageSize !==0){
										s.pageCount++;
									}
								}else {
									s.pageCount = 1;
								}
								s.items = result;
								self.setState(s);
							});
						}
					}
				},
				sort:function(e){
					var self = this;
					var props = self.props;
					var state = self.state;
					var sortKey = e.target.dataset.key;
					var sortType = state.sortType;
					if(sortType && sortType === 'asc') sortType = 'desc';
					else if(sortType && sortType === 'desc') sortType = 'asc';
					if(!sortType) sortType = 'asc';
					self.setState({sortKey:sortKey,sortType:sortType});
				},
				render:function(){
					var self = this;
					var props = self.props;
					var state = self.state;
					if(!self.selectedIndex) {
						if(props.defaultSelectedItems){
							self.selectedIndex = props.defaultSelectedItems;
						}else{
							self.selectedIndex = {};
						}
					}
					var retOp = {};
					if(props.id) {retOp.id = props.id;}
					else{ retOp.id = helper.uuid16();}
					var title,operations,tablelist,thead,tbody,footer,itemsJ = 0,colnames = {};
					title = com.createBase('bg',{theme:'info'},props.title || '查询列表');
					
					operations = props.operations.map(function(one){
						var op = {
							theme:one.theme
							,type:'a'
							,href:one.needCheck?null:one.href
							,onClick:function(e){
								var cks = self.getChecks();
								if(one.needCheck && cks.length === 0){
									alert('请选择一条记录');
								}else{
									if(one.onClick){
										one.onClick(cks);
									}else if(one.href && cks.length>0){
										var pre = '?';
										if(one.href.indexOf('?') > 0){
											pre = '&';
										}
										location = one.href + pre + 'id=' + cks[0].id;
									}
								}
							}
							,key:helper.uuid16()
						};
						var name = one.name;
						return com.createBase('button',op,name);
					});
					
					thead = r.DOM.thead({},r.DOM.tr({}
						,props.canSelect?r.DOM.th({},'选择'):null
						,props.hasNo?r.DOM.th({},'序号'):null
						,props.headers.map(function(one){
							var onekey = retOp.id + '_table_header_th_' + one.key;
							colnames[one.key] = one;
							return r.DOM.th({key:onekey}
								,com.createBase('button',{'data-key':one.key,theme:'link',onClick:self.sort},one.name));
						})
					));
					
					if(!state.items || typeof state.items === 'string'
						|| state.items.length === 0 ){
						var colSpan = props.headers.length;
						var noItem = '没有数据';
						if(typeof state.items === 'string') {
							noItem = state.items;
						}
						if(props.canSelect) {
							colSpan++;
						}
						if(props.hasNo) {
							colSpan++;
						}
						tbody = r.DOM.tbody(null,r.DOM.tr({style:{textAlign:'center'}}
							,r.DOM.td({colSpan: colSpan},noItem)
						));
					}else{
						var sortKey = state.sortKey;
						var sortType = state.sortType || 'asc';
						if(sortKey){
							state.items.sort(function(a,b){
								var vala = a[sortKey];
								var valb = b[sortKey];
								var lt = 1,gt = -1;
								if(sortType === 'desc'){
									lt = -1,gt = 1;
								}
								if(!vala && !valb) return 0;
								return (vala > valb? lt: gt);
							});
						}
						
						tbody = r.DOM.tbody(null,state.items.map(function(one){
							itemsJ++;
							var id = props.id;
							var onekey = id + '_body_tr_' + itemsJ;
							var radioname = id + '_radio';
							var checkboxname = id + '_checkbox';
							var selectKey = id + '_select_' + itemsJ;
							var numberKey = id + '_no_' + itemsJ;
							var valueKey = id + '_td_' + itemsJ;
							var trchildren = [];
							var cls3;
							
							if(props.canSelect){
								var selectOp = {
									type:'checkbox'
									,name:checkboxname
									,value:one.id
								};
								if(self.selectedIndex[one.id]){
									selectOp.defaultChecked = true;
									cls3 = 'am-active';
								}
								if(props.canSelect ==='radio'){
									selectOp.type = 'radio';
									selectOp.name = radioname;
								}
								trchildren.push(r.DOM.td({key:selectKey,id:selectKey}
									,r.DOM.input(selectOp)
								));
							}
							
							if(props.hasNo){
								var no = itemsJ;
								if(state.pageNo >1){
									no += (state.pageNo -1) * props.pageSize;
								}
								trchildren.push(r.DOM.td({key:numberKey},no));
							}
							
							for(var key in colnames){
								var val1 = one[key];
								var a2 = colnames[key];
								trchildren.push(r.DOM.td({key:valueKey+'_' + key},val1));
							}
							return r.DOM.tr({id:onekey,className:cls3,key:helper.uuid16(),onClick:function(e){
								var ch;
								var clicktype = e.target.type;
								if(props.canSelect ==='radio' && clicktype !== 'radio'){
									ch = $('#' + selectKey + ' input[type="radio"]').get(0);
									$('#' + onekey).parent().find('.am-active').removeClass('am-active');
									if(!ch.checked){
										$('#' + onekey).addClass('am-active');
										self.selectedIndex = {};
										self.selectedIndex[one.id] = one;
									}else{
										self.selectedIndex = {};
									}
								}else if(props.canSelect && clicktype !== 'checkbox'){
									ch = $('#' + selectKey + ' input[type="checkbox"]').get(0);
									if(!ch.checked){
										$('#' + onekey).addClass('am-active');
										self.selectedIndex[one.id] = one;
									}else{
										$('#' + onekey).removeClass('am-active');
										self.selectedIndex[one.id] = null;
										delete self.selectedIndex[one.id];
									}
								}

								if(ch) ch.checked = !ch.checked;
							}},trchildren);
						}));
					}
					
					tablelist = com.createBase('table',{bordered:true},thead,tbody);
					
					if(props.pageSize && props.pageSize >0){
						var footerleft,footercenter,footerright,centerinfo;
						footerleft = com.createBase('button',{disabled:state.pageNo<=1,onClick:self.beforePage},'上一页');
						centerinfo = '第' + state.pageNo + '页';
						if(props.countServiceName){
							centerinfo += '/共' + state.pageCount + '页';
						}
						footercenter = com.createBase('text',{theme:'primary'},centerinfo);
						footerright = com.createBase('button',{disabled:state.isLast,onClick:self.nextPage},'下一页');
						footer = com.createBase('grid',{}
							,{xs:5,content:footerleft}
							,{xs:2,content:footercenter}
							,{xs:5,content:footerright,className:'am-text-right'}
						);
					}
					var ret = r.DOM.div(retOp,title,com.createBase('grid',{className:'marB1em'},{xs:12,content:operations}),tablelist,footer);
					return ret;
				}
			}))
			,form:r.createFactory(r.createClass({
				render:function(){
					var self = this;
					var props = self.props;
					var state = self.state;
					var defaultData = props.defaultData || {};
					var title = com.createBase('bg',{theme:'info'},props.title || '表单');
					var retOp = {};
					if(props.id) {retOp.id = props.id;}
					else{ retOp.id = helper.uuid16();}
					if(props.onSubmit) retOp.onSubmit = props.onSubmit;
					var submitName = props.submitName || '提交';
					var items = props.items.map(function(o){
						var key = helper.uuid16();
						var label = r.DOM.label({htmlFor:key},o.show)
						var children;
						if(o.type === 'select'){
							children = o.items.map(function(two){
								var key2 = helper.uuid16();
								return r.DOM.option({key:key2,value:two.value},two.name);
							});
						}
						var input = com.createBase('input',{
							id:key
							,type:o.type
							,aceType:o.aceType
							,aceTheme:o.aceTheme
							,name:o.name
							,placeholder:o.show
							,value:defaultData[o.name]
							,disabled:o.disabled
							,rows:o.rows
							,height:o.height
						},children);
						return com.createBase('grid',{key:key},{content:r.DOM.div({style:{padding:'5px'}},label,input)});
					});
					var submit,reset;
					
					submit = com.createBase('input',{type:'submit',value:submitName,theme:'primary'});
					reset = com.createBase('input',{type:'reset',value:'重置'});
					var buttons = com.createBase('grid',{className:'am-text-right'},{content:r.DOM.div({style:{padding:'5px'}},submit,reset)});
					var ret =  r.DOM.form(retOp,title,items,buttons);
					
					return ret;
				}
			}))
		}
	};
	com.registTheme('amazeui',obj);
	
})(vinculum.config,vinculum.server,vinculum.helper,vinculum.components);
